<template>
  <div
    class="showPanel flex flex-col gap-y-[20px] h-full animate__animated transitionPanel relative animate__fadeInLeft"
  >
    <div class="relative h-full text-[#fff]">
      <div
        class="absolute flex flex-col gap-y-[20px] top-0 left-0 right-0 bottom-0 pt-[50px] pl-[10px] pb-[50px]"
      >
        <base-card class="flex-1 overflow-hidden" title="企业用工需求总数">
          <base-chart :options="topOption"></base-chart>
        </base-card>
        <base-card class="flex-1 overflow-hidden" title="企业用工趋势">
          <base-chart :options="middleOption"></base-chart>
        </base-card>
        <!--   园区用工总人数-->
        <base-card class="flex-1 overflow-hidden" title="企业状态占比">
          <base-chart :options="bottomOption"></base-chart>
        </base-card>
      </div>
    </div>
  </div>
</template>

<script setup>
import BaseCard from "@/components/three/component/baseCard.vue";
import BaseChart from "@/components/three/component/baseChart/index.jsx";
import { onMounted, ref } from "vue";
import SimpleLine from "@/components/three/component/simpleLine.vue";
import { CommonEchartLegend } from "@/utils/index.js";
let dataMap = {
  其他: {
    value: 10,
    percent: "25%",
  },
  农产品加工业: {
    value: 10,
    percent: "25%",
  },
  建筑材料: {
    value: 10,
    percent: "25%",
  },
  铁合金制造: {
    value: 10,
    percent: "25%",
  },
  新材料: {
    value: 5,
    percent: "12.5%",
  },
  装备制造业: {
    value: 5,
    percent: "12.5%",
  },
};
let ser_data = [
  {
    value: 10,
    name: "其他",
  },
  {
    value: 10,
    name: "农产品加工业",
  },
  {
    value: 10,
    name: "建筑材料",
  },
  {
    value: 10,
    name: "铁合金制造",
  },
  {
    value: 5,
    name: "新材料",
  },
  {
    value: 5,
    name: "装备制造业",
  },
];
const topOption = ref({
  backgroundColor: "rgba(0,0,0,0)",
  title: [
    {
      text: "其他",
      top: "45%",
      left: "30%",
      padding: [0, 0, 0, -20],
      textStyle: {
        color: "#3FAA90",
        fontSize: 14,
        fontWeight: "bold",
      },
    },
  ],
  tooltip: {
    show: false,
    trigger: "item",
  },
  legend: {
    ...CommonEchartLegend,
    orient: "vertical",
    right: "5%",
    top: "middle",
    formatter: (name) => {
      return `${name}  ${dataMap[name].value}`;
    },
  },
  series: [
    {
      type: "pie",
      radius: ["45%", "65%"],
      center: ["28%", "50%"],
      label: {
        show: false,
      },
      data: ser_data,
    },
  ],
});
const middleOption = ref({
  grid: {
    left: "12%",
    top: "15%",
    bottom: "15%",
    right: "8%",
  },
  tooltip: {
    trigger: "axis",
    backgroundColor: "rgba(0,0,0,0.6)",
    borderWidth: "0",
    textStyle: {
      color: "#fff",
    },
  },
  xAxis: {
    data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
    axisTick: {
      show: false,
    },
    axisLine: {
      lineStyle: {
        color: "rgba(255, 129, 109, 0.1)",
        width: 1,
      },
    },
    axisLabel: {
      textStyle: {
        color: "#fff",
        fontSize: 12,
      },
    },
  },
  yAxis: [
    {
      type: "value",
      name: "人数",
      position: "left",
      splitNumber: 2,
      axisTick: {
        show: false,
      },
      axisLine: {
        lineStyle: {
          color: "rgba(255, 129, 109, 0.1)",
          width: 1,
        },
      },
      axisLabel: {
        textStyle: {
          color: "#fff",
        },
      },
      areaStyle: {},
      splitLine: {
        show: true,
        lineStyle: {
          color: "#111",
          width: 1,
          type: "dashed",
        },
      },
    },
  ],
  series: [
    {
      name: "用工人数",
      type: "line",
      color: "#85DCF8",
      barWidth: 40,
      smooth: true,
      showSymbol: false,
      label: {
        show: false,
        position: "top",
        distance: 15,
        fontWeight: "bolder",
        fontSize: 20,
      },
      itemStyle: {
        emphasis: {
          opacity: 1,
        },
      },
      data: [
        400, 900, 800, 940, 1500, 1020, 1030, 1010, 1040, 1060, 1800, 2000,
      ],
    },
  ],
});
const topList3 = ref([
  {
    label: "内蒙古111111",
    value: "32",
  },
  {
    label: "内蒙古111111",
    value: "39",
  },
  {
    label: "内蒙古111111",
    value: "32",
  },
  {
    label: "内蒙古111111",
    value: "32",
  },
  {
    label: "内蒙古111111",
    value: "32",
  },
  {
    label: "内蒙古111111",
    value: "32",
  },
  {
    label: "内蒙古111111",
    value: "32",
  },
  {
    label: "内蒙古111111",
    value: "32",
  },
]);
let dataMap1 = {
  正常生产: {
    value: 10,
    percent: "25%",
  },
  季节性停产: {
    value: 10,
    percent: "25%",
  },
  新增在建: {
    value: 10,
    percent: "25%",
  },
  其他暂时停产: {
    value: 10,
    percent: "25%",
  },
};
let ser_data1 = [
  {
    value: 10,
    name: "正常生产",
  },
  {
    value: 10,
    name: "季节性停产",
  },
  {
    value: 10,
    name: "新增在建",
  },
  {
    value: 10,
    name: "其他暂时停产",
  },
];
const bottomOption = ref({
  backgroundColor: "rgba(0,0,0,0)",
  title: [
    {
      text: "正常生产",
      top: "45%",
      left: "25%",
      padding: [0, 0, 0, -20],
      textStyle: {
        color: "#3FAA90",
        fontSize: 14,
        fontWeight: "bold",
      },
    },
  ],
  tooltip: {
    show: false,
    trigger: "item",
  },
  legend: {
    ...CommonEchartLegend,
    orient: "vertical",
    right: "5%",
    top: "middle",
    formatter: (name) => {
      return `${name}  ${dataMap1[name].value}`;
    },
  },
  series: [
    {
      type: "pie",
      radius: ["45%", "65%"],
      center: ["28%", "50%"],
      label: {
        show: false,
      },
      data: ser_data1,
    },
  ],
});
onMounted(() => {});
</script>
<style scoped lang="less"></style>
